<template>
  <!-- 哈希值弹窗 -->
  <van-popup
    class="userBenefitsPopup"
    v-model:show="props.show"
    :style="{
      'background-color': 'transparent',
    }"
    overlay-class="overlayPopupClass"
    zIndex="99999"
    teleport="body"
    :close-on-click-overlay="false"
  >
    <!-- 背景光环 -->
    <img class="gh" src="/image/inviteFriends/ferr-gh-icon.svg" />
    <!-- 蝴蝶结 -->
    <img class="hdj" src="/image/inviteFriends/free-hdj-icon.svg" />
    <!-- 记录入口 -->
    <div class="box-record items-center" @click="jumpPage('record')">
      <div class="items-center box-record-title">
        {{ $t("lotteryMoney.mfjl") }}
        <img class="box-record-img" src="/image/jt-right-fff.svg" />
      </div>
      <img
        class="box-record-sjx"
        src="/image/lotterymoney/free-jlhd-icon.svg"
      />
    </div>
    <!-- 容器 -->
    <div class="box">
      <div class="box-box">
        <div class="box-box-box">
          <!-- 标题 -->
          <div class="box-title">
            <div class="box-title-value">
              {{ $t("lotteryMoney.hyzldmfcj") }}
            </div>
          </div>
          <!-- 卡片 -->
          <div class="box-card items-center">
            <div class="box-card-item items-center">
              <img
                class="box-card-item-img"
                src="/image/inviteFriends/free-hyzc-icon.svg"
              />
              <div class="box-card-item-title">
                {{ $t("lotteryMoney.hyzc") }}
              </div>
              <div class="box-card-item-value">
                +1 {{ $t("lotteryMoney.mfcjcs") }}
              </div>
            </div>
            <div class="box-card-item items-center">
              <img
                class="box-card-item-img"
                src="/image/inviteFriends/free-hycz-icon.svg"
              />
              <div class="box-card-item-title">
                {{ $t("lotteryMoney.hysc") }}
              </div>
              <div class="box-card-item-value">
                +5 {{ $t("lotteryMoney.mfcjcs") }}
              </div>
            </div>
          </div>
          <!-- 卡片描述 -->
          <div class="box-desc">
            {{ $t("lotteryMoney.hyzckd") }}
            <span class="box-desc-value"
              >{{ shareInfo ? shareInfo.freeDrawPrizeCount : 1 }}
              {{ $t("lotteryMoney.mfcjcs") }}</span
            >
          </div>
          <div class="box-desc box-desc-bt">
            {{ $t("lotteryMoney.hykhd").split("xxx")[0] }}
            <span class="box-desc-value"
              >{{ shareInfo ? shareInfo.friendPrizeAmount : 500 }} BDC</span
            >
          </div>
          <!-- 底部按钮 -->
          <div class="box-footer items-center">
            <div class="box-footer-top items-center">
              <div class="box-footer-top-left">
                {{ $t("lotteryMoney.lj") }}
              </div>
              <!-- 地址 -->
              <div class="box-footer-top-center">
                {{ shareUrl }}
              </div>
              <!-- 复制按钮 -->
              <img
                class="box-footer-top-copy"
                src="/image/inviteFriends/ferr-copy-icon.svg"
                @click="saveCopy"
              />
            </div>
            <div class="box-footer-btn" @click="confirm">
              {{ $t("lotteryMoney.fxghy") }}
            </div>
          </div>
        </div>
      </div>
      <!-- 底部按钮-背景 -->
      <img
        class="box-footer-bg"
        src="/image/inviteFriends/ferr-footerbg1-icon.svg"
      />
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </van-popup>
</template>
<script setup lang="ts" name="userBenefitsPopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";
import { useClipboard } from "@vueuse/core";
import { useGlobalStore } from "~~/store/global";
import { useLotteryMoneyStore } from "~~/store/modules/lottery-money";
import { getShareInfo } from "@/api/inviteFriends";

const props = withDefaults(
  defineProps<{
    lottery: any;
    show: boolean;
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits(["update:show", "confirm"]);
const { t } = useI18n();
const globalStore = useGlobalStore();
const lotteryMoneyStore = useLotteryMoneyStore();
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase

// 获取页面信息
const shareInfo = ref(null);

onMounted(() => {
  if (lotteryMoneyStore.$state.inviteLotteryCode) {
    getShareInfo({
      inviteCode: lotteryMoneyStore.$state.inviteLotteryCode,
    }).then((res) => {
      // console.log("分享页面信息:", res);
      if (res) {
        if (res.vipLevel != null && Number(res.vipLevel) >= 0) {
          shareInfo.value = res;
        }
      }
    });
  }
});
onBeforeUnmount(() => {});

// 关闭弹窗
const closePopup = () => {
  emit("update:show", false);
};
// 分享地址
const shareUrl = computed(() => {
  return (
    file.sharePage +
    "?hiddenBar=1" +
    `&language=${globalStore.$state.language}` +
    `&packageId=${globalStore.$state.packageId}` +
    `&code=${lotteryMoneyStore.$state.inviteLotteryCode}`
  );
});

// 点击确认
let shareLoading = false;
const confirm = () => {
  if (shareLoading) return;
  try {
    shareLoading = true;
    console.log("分享地址:", shareUrl.value);
    bridge.onShare(t("lotteryMoney.zlhyzdj"), shareUrl.value);
  } catch (error) {
    console.log(error);
  } finally {
    // 延时 1s，防止用户连续点击
    setTimeout(() => {
      shareLoading = false;
    }, 1000);
    closePopup();
  }
};

/**
 * @description: 保存到剪贴板
 */

const file = getOssFileUrl({
  avatarDefault: "/image/avatar-default.png",
  sharePage: "/lottery-money/free/invite",
});

const saveCopy = () => {
  if (!file.sharePage) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast({
      message: t("mvp.other.bzcjtb"),
      "z-index": 9999999,
    });
  } else {
    copy(shareUrl.value);
    showToast({
      message: t("mvp.other.fzcg"),
      "z-index": 9999999,
    });
  }
};

// 页面跳转
const jumpPage = async (type: string) => {
  if (type === "record") {
    firebase?.logEvent("BDC_H5_LotteryMoney_freeRecord_PUV"); // 埋点访问
    await navigateI18nTo({ path: "/lottery-money/free/lottry-free-record" });
  }
};
</script>
<style lang="scss" scoped>
.userBenefitsPopup {
  overflow: initial;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0;
}
.gh {
  position: absolute;
  top: -92 * 2px;
  width: 100vw;
}
.hdj {
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  top: -48 * 2px;
}
.box {
  position: relative;
  z-index: 9;
  margin: 0 40 * 2px;
  background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
  border-radius: 12 * 2px;
  overflow: hidden;
  padding: 4 * 2px 4 * 2px 4 * 2px 4 * 2px;
  &-box {
    background: linear-gradient(0deg, #fff 59.68%, #fff6eb 100%);
    border-radius: 12 * 2px;
    overflow: hidden;
    padding: 4 * 2px 4 * 2px 0 4 * 2px;
    &-box {
      background: linear-gradient(0deg, #fff 59.68%, #fff6eb 100%);
      border-radius: 12 * 2px;
      overflow: hidden;
      padding: 10 * 2px 7 * 2px 0 7 * 2px;
      border: 1px solid #ffefdb;
      position: relative;
    }
  }
  &-title {
    position: relative;
    width: 100%;
    padding: 0 22 * 2px;
    margin-bottom: 20 * 2px;

    &-value {
      text-align: center;
      font-size: 15 * 2px;
      color: #002853;
      font-weight: 590;
    }
  }
  &-card {
    position: relative;
    justify-content: center;

    &-item {
      padding: 7 * 2px;
      width: 140 * 2px;
      height: 100 * 2px;
      border-radius: 8px;
      border: 0.5px solid #ffe6c7;
      background: #fff7ed;
      justify-content: center;
      flex-direction: column;
      margin: 0 3 * 2px;

      &-img {
        height: 34 * 2px;
      }

      &-title {
        text-align: center;
        color: #002853;
        font-size: 12 * 2px;
        margin: 5 * 2px 0;
      }

      &-value {
        text-align: center;
        color: #c06100;
        font-size: 12 * 2px;
        font-weight: 590;
      }
    }
  }
  &-desc {
    text-align: center;
    font-size: 12 * 2px;
    color: #002853;
    margin-top: 12 * 2px;
    &-bt {
      margin-top: 8 * 2px;
    }

    &-value {
      color: #e87604;
    }
  }
  &-footer {
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 130 * 2px;
    &-bg {
      position: absolute;
      bottom: 2 * 2px;
      z-index: 8;
      width: 100%;
      margin-left: -4 * 2px;
    }
    &-top {
      position: relative;
      z-index: 9;
      border-radius: 4 * 2px;
      background: #fff;
      margin-top: 20 * 2px;
      margin-bottom: 10 * 2px;

      &-left {
        font-size: 14 * 2px;
        white-space: nowrap;
        color: #999da7;
        margin-left: 8 * 2px;
      }
      &-center {
        @include multi-line-omit(1);
        margin-left: 8 * 2px;
        font-size: 14 * 2px;
        color: #523b00;
        font-weight: 590;
      }
      &-copy {
        margin-left: 8 * 2px;
      }
    }
    &-btn {
      position: relative;
      z-index: 9;
      border-radius: 100px;
      background: linear-gradient(270deg, #fb7f09 0.03%, #ffb901 99.97%);
      color: #fff;
      font-size: 15 * 2px;
      font-weight: 590;
      text-align: center;
      width: 100%;
      padding: 10 * 2px 12 * 2px;
    }
  }

  &-record {
    position: absolute;
    z-index: 39;
    top: 59 * 2px;
    right: 64px;
    flex-direction: column;
    align-items: flex-end;
    &-title {
      padding: 3 * 2px 5 * 2px;
      border-radius: 24px 0px 0px 24px;
      background: linear-gradient(90deg, #007bff 0.07%, #00b2ff 99.93%);
      font-size: 12 * 2px;
      color: #fff;
    }
    &-img {
      margin-left: 2 * 2px;
      width: 10 * 2px;
      height: 10 * 2px;
    }
    &-sjx {
      width: 8 * 2px;
      height: 8 * 2px;
    }
  }
}
.close {
  position: absolute;
  z-index: 9;
  bottom: -50 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
</style>
